<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="安检时间:">
        <el-date-picker
          v-model="startDt"
          type="date"
          placeholder="选择日期"
        />
        <span>至</span>
        <el-date-picker
          v-model="endDt"
          type="date"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item label="安检类型:">
        <el-select v-model="checkType" filterable clearable placeholder="请选择">
          <el-option
            v-for="item in checkTypeMap"
            :key="item.value"
            :label="item.desc"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getData">查询</el-button>
    </el-form>
    <lb-table
      ref="lbTable"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="column"
      :data="tableData.data"
      height="60vh"
      pagination
      :total="tableData.total"
      @fetch="getData"
    />
    <rectification ref="rectification" />
    <security-order-info
      ref="securityOrderInfo"
      :tree-data="treeData"
    />
  </div>
</template>

<script>
  import { parseTime, formatColumnMap } from '@/utils'
  import { gasCheckBillQueryList2, queryRiskTrackMap } from '@/api'
  import rectification from '../../safetySupervise/securityOrderManage/components/rectification.vue'

  export default {
    name: 'tab-check',
    components: {
      rectification,
      securityOrderInfo: () => import('../../safetySupervise/securityOrderManage/components/securityOrderInfo.vue')
    },
    props: ['csmId', 'treeData'],
    data() {
      return {
        startDt: new Date().setMonth(new Date().getMonth() - 3),
        endDt: new Date(),
        checkType: '',
        checkTypeMap: [
          { value: 1, desc: '随单安检', key: 'SD' },
          { value: 2, desc: '定期安检', key: 'JH' }
        ],
        tableData: {
          data: []
        }
      }
    },
    computed: {
      column: function() {
        return [
          {
            label: '安检单号',
            prop: 'checkId',
            width: 100,
            align: 'center',
            render: (h, { row }) => <el-link underline={false} onClick={() => this.checkInfo(row, '')}>{row.checkId}</el-link>
          },
          { label: '安检地址', prop: 'csmAddress', width: '', align: 'left' },
          {
            label: '安检类型',
            align: 'center',
            prop: 'checkType',
            width: 100,
            render: (h, { row }) => (
            <span>
              {row.checkType &&
                formatColumnMap(this.checkTypeMap, 'value', row.checkType, 'desc')}
            </span>
          )
          },
          { label: '安检机构', prop: 'orgName', width: 80 },
          { label: '安检人', prop: 'checkUser', width: 80 },
          { label: '稽/夜查员', prop: 'auditCheckUser', width: 80 },
          {
            label: '隐患等级',
            align: 'center',
            prop: 'warnLevel',
            width: 120,
            render: (h, { row }) =>
              row.warnLevel ? (
              <el-link underline={false} onClick={() => this.warnInfo(row)}>
                {formatColumnMap(this.warnLevelMap, 'value', row.warnLevel, 'desc')}
              </el-link>
                ) : (
              <span>
                {formatColumnMap(this.warnLevelMap, 'value', row.warnLevel, 'desc')}
              </span>
            )
          },
          {
            label: '安检时间',
            width: 160,
            prop: 'checkDt',
            render: (h, { row }) => (
            <span>
              {row.checkDt && parseTime(row.checkDt, '{y}-{m}-{d} {h}:{i}:{s}')}
            </span>
          )
          },
          {
            label: '关联整改单',
            prop: 'traceCode',
            width: 130,
            align: 'center',
            render: (h, { row }) => <el-link underline={false} onClick={() => this.checkInfo(row, '整改详情')}>{row.traceCode}</el-link>
          },
          {
            label: '关联复检单',
            prop: 'recheckbillCode',
            width: 100,
            align: 'center',
            render: (h, { row }) => <el-link underline={false} onClick={() => this.checkInfo(row, '复检详情')}>{row.recheckbillCode}</el-link>
          }
        ]
      }
    },
    async created() {
      this.getdanger()
    },
    methods: {
      async getData({ currentPage = 1, pageSize = 20 }) {
        const params = {
          pageIndex: currentPage,
          pageSize,
          checkType: this.checkType,
          csmId: this.csmId
        //   cityCode: "",
        //   countryCode: "",
        //   csmTypes: "",
        //   imageName: "all",
        //   itemDetailIds: [],
        //   labelSource: [1],
        //   orgSNNo: "001000000000000000000",
        //   provinceCode: "",
        //   repairStatus: "",
        //   subType: ""
        }
        if (this.startDt && this.endDt) {
          let checkDt = parseTime(this.startDt, '{y}-{m}-{d} {h}:{i}:{s}')
          let checkDtEnd = parseTime(this.endDt, '{y}-{m}-{d} {h}:{i}:{s}')
          checkDt = checkDt.split(' ')
          checkDtEnd = checkDtEnd.split(' ')
          checkDt[1] = '00:00:00'
          checkDtEnd[1] = '00:00:00'
          checkDt = checkDt.join(' ')
          checkDtEnd = checkDtEnd.join(' ')
          params.checkDt = checkDt
          params.checkDtEnd = checkDtEnd
        }
        const res = await gasCheckBillQueryList2(params)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      },
      async getdanger() {
        const res = await queryRiskTrackMap()
        const data = JSON.parse(res.data.warnLevel) // 隐患等级
        if (data) {
          this.warnLevelMap = []
          data.forEach(item => {
            this.warnLevelMap.push({
              value: item.keyVal,
              desc: item.keyName
            })
          })
          this.warnLevelMap.push({
            value: 0,
            desc: '无隐患'
          })
        }
      },
      warnInfo(row) {
        this.$refs.rectification.open(row)
      },
      checkInfo(row, type) {
        const securityDom = document.getElementsByClassName('security')[0]
        if (!securityDom) {
          this.$refs.securityOrderInfo.open(row, type)
        } else {
          this.$message.warning('该信息弹窗已存在，请关闭当前弹窗')
        }
      }
    }
  }
</script>

<style scoped>

</style>
